<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>10_过渡&动画</title>
	<style>
	    /*指定过渡效果*/
		.xxx-enter-active,.xxx-leave-active{
			transition: opacity 1s
		}
		/*指定隐藏时的样式*/
		.xxx-enter,.xxx-leave-to{
			opacity: 0;
		}

		.yyy-enter-active{
			transition: all 3s
		}
		.yyy-leave-active{
			transition: all 1s
		}
		.yyy-enter,.yyy-leave-to{

            opacity: 0;
			transform: translateX(20px);
		}

		.zzz-enter-active{
			animation: in .5s
		}
		.zzz-leave-active{
			animation: in .5s reverse
		}
		@keyframes in{
			0%{
				transform: scale(0);
			}
			50%{
				transform: scale(1.5);
			}
			100%{
				transform: scale(1);
			}
		}

	</style>
</head>
<body>
<!--
1. vue动画的理解
  操作css的trasition或animation
  vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
  1). 在目标元素外包裹<transition name="xxx">
  2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
  xxx-enter-active: 指定显示的transition
  xxx-leave-active: 指定隐藏的transition
  xxx-enter: 指定隐藏时的样式
-->

<div id="demo1">
	<button @click="isShow = !isShow">Toggle</button>
	<transition name="xxx">
	    <p v-show="isShow">I LOVE YOU</p>
	</transition>
</div>

<div id="demo2">
	<button @click="isShow = !isShow">Toggle</button>
	<transition name="yyy">
	     <p v-show="isShow">I LOVE YOU</p>
	 </transition>
</div>

<div id="demo3">
	<button @click="isShow = !isShow">Toggle</button>
	<br>
	<transition name="zzz">
	     <p v-show="isShow" style="display: inline-block">I LOVE YOU</p>
	 </transition>
</div>
<script src="../js/vue.js"></script>
<script>
	const vm1 = new Vue({
		el: '#demo1',
		data: {
            isShow: true,
		},
		
	})

	const vm2 = new Vue({
		el: '#demo2',
		data: {
			isShow: true,
		}
	})

	const vm3 = new Vue({
		el: '#demo3',
		data: {
			isShow: true,
		}
	})


</script>
</body>
</html>